import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const CHANGE='change'

import {getUserInfo} from '../api/user.js'
import {getCateList} from '../api/home.js'
import {getUploadToken,uploadQiniu} from '../api/api.js'

// Vuex可以跨页面使用的 全局变量
// mutations 对应 commit
	// 用mutations里的方法 要用commit来调
	// actions 对应 dispatch
	// 用actions里的方法 要用dispatch来调
	
export default new Vuex.Store({
	// state 放数据
	state: {
		// a:1,
		token:"",
		uid:'',
		userInfo:{},
		isLogin:false,
		cate:[],
		publish_num:0,
		liked_num:0
	},
	// getters 是vue里的computed计算属性
	getters: {},
	// mutations 放方法
	mutations: {
		// 方法名(state,形参/自己传来的参)
		// changea(state,val){
		// 	// 在这个里只能存粹的改数据
		// 	state.a=val
		// },
		[CHANGE](state,{key,value}){
			state[key]=value
		},
		clear(state){
			state.token="";
			state.uid='';
			state.userInfo={};
			state.isLogin=false;
			state.publish_num=0;
			state.liked_num=0;
		}
	},
	// actions是调功能方法的  
	// mutations 与 actions相似 但是mutations里只能存粹的改数据  在actions里面可以写异步
	actions: {
		// 方法名(对象,传参接收的那个value)
		async getUserInfo(json,token){
			console.log(json);
			// 在这里面 可以写异步
			return getUserInfo({
				token
			}).then(res=>{
				console.log(res);
				// 再次存起来
				
				if(res.code==0){
					// 改数据要用mutations里改 用commit改  但要在actions里改
					json.commit('change',{key:"userInfo",value:res.userInfo})
					json.commit('change',{key:'uid',value:res.uid})
					json.commit('change',{key:'token',value:res.token})
					json.commit('change',{key:'isLogin',value:true})
					json.commit('change',{key:'publish_num',value:res.publish_num})
					json.commit('change',{key:'liked_num',value:res.liked_num})
				}else{
					console.log(res.msg);
				}
				
			})
		},
		getCate({state,commit}){
			getCateList().then(res=>{
				console.log(res);
				commit('change',{key:"cate",value:res.data})
			})
		},
		// 专门上传
		async upload(o,fileList){
			// 判断一下有没有选择图片
			let imageSrc=[]
			if(!fileList || !Array.isArray(fileList) || fileList.length === 0){
				//没上传图片
				return imageSrc;
			} 
			// 多图 需要循环
			// Promise.all([]) 多个异步任务都完成以后  返回他们完成后的结果 ; 数组里放多个Promise，都成功以后 把结果放在一个新的数组里，(需求  都完成以后再运行下面的代码)
			let task=fileList.map(v=>{
				return new Promise(async(resolve,reject)=>{
					let {file}=v;
					let { type } = file;
					//  拿到类型  比如jpg
					type = type.split('/')[1];  
					// 重新命名  随机名字 防止重复
					let file_name = `${new Date().getTime()}_${Math.random()
						.toString(36)
						.slice(2)}.${type}`;
					
					// 去服务器中申请一个 上传token
					// let { token } = await this.$http.post('/upload/token');
					let { token } = await getUploadToken();
					console.log(token);
					// 上传文件时 一般请求是post 因为要发body  content-type一定要写成motipart/formdata (告诉服务器 不编码 原样数据原样 发送 分隔符把数据分开 后端收到数据就可以分割 解析拿到文件 存储文件 返回路径)
					// 在ajax里上传文件要用formdata
					// Ajax是对表单的模拟
					const formdata = new FormData();
					formdata.append('file', file);
					formdata.append('token', token);
					formdata.append('key', file_name);
					
					uploadQiniu(formdata).then((res)=>{
						console.log(res);
						resolve(`http://toutiao.longxiaokj.com/`+ res.key)
						
					});
				});
			});
			// task [promises,promise]
			imageSrc= await Promise.all(task);
			return imageSrc
		}
	},
	// modules
	modules: {}
})